<template>
  <div class="headerTop">
    <div class="title">
      <slot>我是默认配置</slot>
    </div>
    <div class="userDesc" @click="show">
      <el-icon><avatar /></el-icon>
      <span>七岁</span>
      <el-icon><caret-bottom /></el-icon>
    </div>

    <div class="back" v-if="isshow">
      <div class="loginName">
        <p>登陆名：admin</p>
        <button @click="back">退出</button>
      </div>
      <p>昵称：七岁</p>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue"
//引用element-plus的消息弹框
import { ElMessage } from "element-plus"
//使用vue-router的里面的route，router
import { useRouter } from "vue-router"

export default defineComponent({
  setup() {
    let isshow = ref(false)

    //定义router
    const router = useRouter()

    //控制退出框是否显示
    const show = () => {
      isshow.value = !isshow.value
    }

    const back = () => {
      localStorage.removeItem("token")
      ElMessage({
        message: "已退出登陆",
        type: "success",
      })
      router.push("/login")
    }

    return {
      isshow,
      show,
      back,
    }
  },
})
</script>

<style lang="less" scoped>
.headerTop {
  position: relative;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-left: none;
  border-right: none;
  margin-bottom: 15px;
  .title {
    font-size: 20px;
    padding-left: 15px;
    font-weight: 700;
  }
  .userDesc {
    padding-right: 15px;
    span {
      margin: 0 10px;
    }
  }
}

.userDesc:hover {
  cursor: pointer;
}

.back {
  position: absolute;
  right: 20px;
  top: 50px;
  display: flex;
  flex-direction: column;
  z-index: 10;
  width: 344px;
  height: 110px;
  font-weight: 700;
  color: #fff;
  box-sizing: border-box;
  padding: 0 15px;
  background: url("../../assets/account-banner-bg.png");
  background-size: 100%;
  .loginName {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    button {
      padding: 5px;
      border: none;
      border-radius: 5px;
      color: #fff;
      background-color: #1baeae;
    }
  }
}
</style>
